<template>
  <div class="body">

    <!-- 嫌疑人信息 -->
    <div class="aj_msg">
      <p class="title_box">嫌疑人信息</p>
      <div class="msg">
        <div class="border">
          <p class="title">姓名</p>
          <p class="text">{{ bailInfo.bail.crime_name }}</p>
        </div>
        <div>
          <p class="title">身份证号</p>
          <p class="text">{{ bailInfo.bail.crime_idcard }}</p>
        </div>
        <div>
          <p class="title">出生日期</p>
          <p class="text">{{bailInfo.bail.crime_date?bailInfo.bail.crime_date:'--'}}</p>
        </div>
        <div>
          <p class="title">家庭住址</p>
          <p class="text">{{ bailInfo.bail.crime_address }}</p>
        </div>
      </div>
    </div>

    <!-- 案件信息 -->
    <div class="aj_msg">
      <p class="title_box">案件信息</p>
      <div class="msg">
        <div class="border">
          <p class="title">案件编号</p>
          <p class="text">{{ bailInfo.bail.case_code }}</p>
          <!-- <p class="label">多个10人</p> -->
        </div>
        <div>
          <p class="title">案件名称</p>
          <p class="text">{{ bailInfo.bail.case_title }}</p>
        </div>
        <div>
          <p class="title">办案单位</p>
          <p class="text">{{ bailInfo.department.name }}</p>
        </div>
        <div class="border">
          <p class="title">执行机构</p>
          <p class="text">重庆市江津区字市派出所</p>
        </div>
        <div>
          <p class="title">办案人员</p>
          <p class="text">{{ bailInfo.baar_xm }}</p>
        </div>
        <div>
          <p class="title">办案人手机号</p>
          <p class="text">{{ bailInfo.bamj_mobile }}</p>
        </div>
        <div>
          <p class="time">
            起算日期 {{ bailInfo.bail.start_date }} 至 结算日期
            {{ bailInfo.bail.end_date }}
          </p>
        </div>
      </div>
    </div>

    <!-- 预留银行卡信息 -->
    <div class="aj_msg">
      <p class="title_box">预留银行卡信息</p>
      <div class="msg">
        <div class="border">
          <p class="title">姓名</p>
          <p class="text">{{bankMsg.card_name}}</p>
        </div>
        <div>
          <p class="title">银行卡卡号</p>
          <p class="text">{{bankMsg.card_idcard}}</p>
        </div>
        <div>
          <p class="title">银行名称</p>
          <p class="text">{{bankMsg.bank_name}}</p>
        </div>
        <div>
          <p class="title">与本人关系</p>
          <p class="text">{{name}}</p>
        </div>
      </div>
    </div>

    <div class="bank_msg" style="margin-top:22px">
      <p class="title_box">退款方式</p>
      <div class="msg on-active1">
        <el-radio-group>
          <el-radio>{{!tkType?'原路优先':'预留优先'}}</el-radio>
        </el-radio-group>
      </div>
    </div>

    <!-- 执行取保候审 -->
    <div class="book_msg">
      <p class="title_box">执行取保候审</p>
      <div class="msg msg_on">

        <div v-for="(item,index) in quBaoFileArr" :key="index">
          <div class="img" v-if="item.imagetype == 'pdf'">
            <svg-icon  name="pdf" color="red" width="100px" height="120px"></svg-icon>
            <p >查看</p>
          </div>

          <div class="img" v-if="item.imagetype == 'png'">
            <el-image 
            style="width: 100px; height: 120px;border-radius: 10px;"
            :src="item.url_new" 
            :preview-src-list="[item.url_new]"/>
            <p >查看</p>
          </div>
          <div class="up_msg">
            <p class="name">{{item.filename_alias?item.filename_alias:item.filename}}</p>
            <p class="time">{{item.uploadtime_text}}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 作证材料原件 -->
    <div class="book_msg">
      <div class="anniu_title">
        <p class="title_box">作证材料原件</p>
        <el-button
          icon="Plus"
          size="mini"
          type="primary"
          @click="fileVisible = true"
        >上传文件</el-button>
      </div>
      <div class="msg">

        <div v-for="(item,index) in evidenceFileArr" :key="index">
          <div class="img" v-if="item.imagetype == 'pdf'">
            <svg-icon  name="pdf" color="red" width="100px" height="120px"></svg-icon>
            <p @click="del(index)"><el-icon size="18"><Delete /></el-icon></p>
          </div>

          <div class="img" v-if="item.imagetype == 'png'">
            <el-image 
            style="width: 100px; height: 120px;border-radius: 10px;"
            :src="item.url_new" 
            :preview-src-list="[item.url_new]"/>
            <p @click="del(index)"><el-icon size="18"><Delete /></el-icon></p>
          </div>
          <!-- <div class="up_msg">
            <p class="name">{{item.filename}}</p>
            <p class="time">{{item.uploadtime_text}}</p>
          </div> -->
        </div>
      </div>
    </div>

    <!-- 缴费金额 -->
    <div class="price">
      <div>
        <div>
          <el-checkbox @change="querenCheck" v-model="checked1" label="我已确认无误" size="large" />
        </div>
        <div>
          <p class="text">缴费金额：</p>
          <p class="num">{{bailInfo.amount_alias}}</p>
        </div>
      </div>
    </div>
    
    <!-- 加文件 -->
    <el-dialog title="" v-model="fileVisible" >
      <update-file @submitFile="changeFileArr" @closeDrawer="closeFileVisible" :bailId="bailInfo.bail_id" :groupId="1"></update-file>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, watch, ref,onMounted } from "vue";
import { defineProps, defineEmits,defineExpose } from "vue";
import { getYlBank } from "@/api/bond/pay";
import { getBindAtt,getAttachment } from "@/api/public";


const props = defineProps({
  tkType: {
    type: Number,
  },
  bailId: {
    type: Number,
  },
  bailInfo: {
    type: Object,
  },
});

onMounted(() => {
  console.log(props.bailInfo);
  getBankMsg()

  getQuBaoFile()

  getEvidenceFile()
});


let checked1 = ref(true)
let bankMsg = ref({})
let name = ref('')
const getBankMsg = async()=>{
  await getYlBank({bail_id:props.bailInfo.bail_id}).then(res=>{
    if(res.code == 1){
      bankMsg.value = res.data
      name.value = res.data.relation_ships.name
    }
  })
}

// 执行取保候审
let quBaoFileArr = ref([])
const getQuBaoFile = async()=>{
  await getBindAtt({bail_id:props.bailInfo.bail_id,group_id:2}).then(res=>{
    if(res.code == 1){
      res.data.map((item: {url_new: any; url: any; })=>{
        item.url_new = import.meta.env.VITE_APP_file_API+item.url
      })
      quBaoFileArr.value = res.data
    }
  })
}


// 作证原件
let evidenceFileArr = ref([])
const getEvidenceFile = async()=>{
  await getBindAtt({bail_id:props.bailInfo.bail_id,group_id:1}).then(res=>{
    if(res.code == 1){
      res.data.map((item: {url_new: any; url: any; })=>{
        item.url_new = import.meta.env.VITE_APP_file_API+item.url
      })
      evidenceFileArr.value = res.data
    }
  })
}

// 文件预览
const filePreview = (url)=>{
  window.open(url);
}

const emit = defineEmits(['check']);

const querenCheck = (e)=>{
  console.log(e)
  emit("check", e);
}


// 获取文件
let fileVisible = ref(false)
const closeFileVisible = ()=>{
  fileVisible.value = false
}
const changeFileArr = (arr:any)=>{
  fileVisible.value = false
  console.log(arr)
  evidenceFileArr.value = arr
}

// 删除文件
const del = (index:any)=>{
  evidenceFileArr.value.splice(index,1)
}

defineExpose({
  checked1,
  evidenceFileArr
})
</script>

<style lang="scss" scoped>
.title_box{
  font-size: 18px;
  font-weight: bold;
  color: #333333;
  margin-bottom:15px;
}
.aj_msg{
  margin:0 30px;
  margin-bottom:32px;

  .msg{
    background: #F8F8F8;
    border: 1px solid #E5E5E5;
    border-radius: 4px;
    padding:6px 20px;
    div{
      display: flex;
      align-items: center;
      font-size: 14px;
      color:#333333;
      line-height: 48px;
      .title{
        width: 100px;
        color:#666666;
      }
      .label{
        padding:0 8px;
        height: 20px;
        line-height: 20px;
        background: #0046DF;
        font-size:12px;
        color:#fff;
        margin-left:16px;
      }
      &.border{
        border-bottom:1px solid #D8D8D8;
      }
      .time{
        padding:0 20px;
        height: 32px;
        line-height: 32px;
        border-radius: 4px;
        background: #EEF3FF;
        border: 1px solid #0046DF;
        font-size: 14px;
        color: #0046DF;
        margin:10px 0 20px 0;
      }
    }
  }
}
.book_msg{
  margin:0 30px;
  margin-top:32px;
  .anniu_title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    .title_box{
      margin-bottom:0;
    }
  }
  .msg {
    background: #f8f8f8;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding: 20px 20px;
    padding-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    &>div{
      display: flex;
      margin:0 10px;
    }
    .img{
      position: relative;
      border-radius: 10px;
      overflow: hidden;
      p{
        position: absolute;
        bottom:0;
        right: 0;
        font-size:12px;
        width: 100%;
        height: 26px;
        background: #1F2E54;
        color:#fff;
        cursor: pointer;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .up_img {
      width: 100px;
      height: 120px;
    }
    .up_msg {
      line-height: 30px;
      text-align: left;
      margin-left: 12px;
      display: flex;
      flex-direction:column;
      justify-content: space-between;
      .name {
        color: #333333;
        font-size: 15px;
        font-weight: 500;
      }
      .text {
        font-size: 14px;
        color: #0046df;
        text-decoration: underline;
        cursor: pointer;
      }
      .time {
        color: #666666;
        font-size: 14px;
      }
    }
    &.msg_on{
      justify-content: space-between;
      &>div{
        margin:0;
        margin-bottom:10px;
      }
      .img{
        box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
        p{
          width: 40px;
          height: 20px;
          border-radius: 0;
          background: rgba(0, 0, 0, 0.3);
          border-bottom-right-radius: 10px;
        }
      }
    }
  }
   .el-upload--picture-card{
    border:none;background: none;
    display: flex;
    align-items: center;
    justify-content: left;
    width: 320px;
  }
}
.price{
  margin:40px 30px;
  &>div{
    display: flex;
  align-items: center;
  justify-content:space-between;
  div{
    display: flex;
    align-items: center;
  }
  }
  .text{
    font-size: 14px;
    color: #666666;
  }
  .num{
    font-size: 26px;
    font-weight: 500;
    color: #F64040;
  }

  
}
.bank_msg {
  margin: 0 30px;
  .on-active1{
    padding-top:10px !important;
    .el-radio-group{
      display: inline-grid;
    }
  }
  .on-active{
    ::v-deep .el-radio__inner{
      border-radius: 0;
      width: 16px;
      height: 16px;
    }
    ::v-deep .el-radio__input.is-checked .el-radio__inner::after {
      content: "";
      width: 8px;
      height: 4px;
      border: 2px solid white;
      border-top: transparent;
      border-right: transparent;
      text-align: center;
      display: block;
      position: absolute;
      top: 3px;
      left: 2px;
      transform: rotate(-45deg);
      border-radius: 0px;
      background: none;
    }
  }
 
  .msg {
    background: #f8f8f8;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding: 0 20px 10px 20px;
    div {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #333333;
      line-height: 70px;
      .title {
        width: 120px;
        display: flex;
        align-items: center;
        span {
          color: red;
          margin-right: 6px;
          position: relative;
          top: 2px;
        }
      }
      
      .input {
        width: 50%;
        border: 1px solid #aaa;
        height: 38px;
        padding: 0 16px;
        border: 1px solid #c8c8c8;
        border-radius: 8px;
        display: flex;
        align-items: center;
        &.on {
          background: #e5e5e5;
        }
      }
      ::v-deep .el-input__inner {
        border: none !important;
        padding: 0;
        margin: 0;
        background: none;
      }
    }
  }
}
</style>
